<template>
	<div class="card__body-container layout-padding">
		<el-card>
			<el-form v-show="state.showSearch" :model="state.queryParams" ref="queryFormRef" inline>
				<el-form-item label="商品名称" prop="goods_id">
					<el-select
						v-model="state.queryParams.goods_id"
						clearable
						placeholder="请输入关键字/选择商品名称"
						filterable
						remote
						:remote-method="goodsIdRemoteMethod"
						remote-show-suffix
						:loading="state.goodsIdSelect.loading"
						@focus="onGoodsIdFocus"
					>
						<el-option v-for="item in state.goodsIdSelect.options" :key="item.id" :label="item.title" :value="item.id" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onQuery">
						<el-icon>
							<ele-Search />
						</el-icon>
						查 询
					</el-button>
					<el-button @click="onResetQuery">
						<el-icon>
							<ele-Refresh />
						</el-icon>
						重 置
					</el-button>
				</el-form-item>
			</el-form>
			<el-table :data="state.tableList" v-loading="state.loading">
				<el-table-column label="商品名称" align="center" prop="title" />
				<el-table-column label="供应商名称" align="center" prop="supplier_name" />
				<el-table-column label="预警规格" align="center" prop="options_name" />
				<el-table-column label="预警阈值" align="center" prop="stock_zuidi" />
				<el-table-column label="当前库存" align="center" prop="stock_sy">
					<template #default="{ row }">
						<el-link type="danger">{{ row.stock_sy }}</el-link>
					</template>
				</el-table-column>
				<!-- <el-table-column label="操作" align="center" prop="operation" fixed="right">
					<template #default="{ row }">
						<el-popconfirm title="您确定下架该商品？此操作不可撤回" @confirm="onShelf(row)" width="180px">
							<template #reference>
								<el-button type="primary" link> 下架 </el-button>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column> -->
			</el-table>
			<PaginationComponent
				v-if="state.total"
				:total="state.total"
				v-model:page="state.queryParams.pageNum"
				v-model:limit="state.queryParams.pageSize"
				@pagination="getList"
			/>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="goodsStockWarning">
import { onMounted, reactive, ref } from 'vue';

import { goodsApi } from '/@/api';

const GoodsApi = goodsApi();
// 定义变量内容
const state = reactive({
	showSearch: true,
	queryParams: {
		goods_id: '',
		pageNum: 1,
		pageSize: 10,
	},
	tableList: [],
	loading: false,
	total: 0,
	goodsIdSelect: {
		loading: false,
		options: [] as any,
	},
});
const queryFormRef = ref();

onMounted(() => {
	getList();
});

/********** 触发事件 **********/
// 关联商品获取焦点
const onGoodsIdFocus = () => {
	if (state.queryParams.goods_id) return;
	_goodsList({ pageNum: 1, pageSize: 10 });
};
// 查询
const onQuery = () => {
	state.queryParams.pageNum = 1;
	getList();
};
// 重置查询
const onResetQuery = () => {
	queryFormRef.value.resetFields();
	onQuery();
};
// // 下架
// const onShelf = (row: any) => {
// 	_goodsShelf({ goods_id: row.goods_id });
// };

/********** 方法事件 **********/
// 刷新列表
const getList = () => {
	state.loading = true;
	_goodsListWarning(state.queryParams);
};
// 关联商品搜索选择
const goodsIdRemoteMethod = (query: string) => {
	if (!query) return;
	_goodsList({ pageNum: 1, pageSize: 10, title: query });
};

/********** 网络事件 **********/
// 商品列表
const _goodsList = (params: Object) => {
	state.goodsIdSelect.loading = true;
	GoodsApi.goodsList(params)
		.then((res) => {
			state.goodsIdSelect.options = res.data.list;
			state.goodsIdSelect.loading = false;
		})
		.catch(() => (state.goodsIdSelect.loading = false));
};
// 查询预警商品
const _goodsListWarning = (params: Object) => {
	GoodsApi.goodsListWarning(params)
		.then((res) => {
			state.tableList = res.data.list;
			state.total = res.data.total;
			state.loading = false;
		})
		.catch(() => (state.loading = false));
};
// // 下架
// const _goodsShelf = (params: Object) => {
// 	PlatformApi.goodsShelf(params).then(() => {
// 		ElMessage.success('操作成功！');
// 		getList();
// 	});
// };
</script>
